<template>
	<web-view ref="webview" class="y-flex-1" src="/hybrid/html/JsonEditor.html" @onPostMessage="handleMessage"></web-view>
</template>

<script>
	export default {
		props: {
			//内容
			value: {
				type: String,
				default: ''
			},
			//模式 code-代码 tree-树状 view-视图 text-文本
			mode: {
				type: String,
				default: 'code'
			},
			//主题色 light-亮色 dark-暗色
			theme: {
				type: String,
				default: 'light'
			}
		},
		data () {
			return {
				ready: false,//webview是否加载完毕
				valueTmp: ''//临时内容
			}
		},
		mounted() {
			this.setTheme(this.theme)
		},
		methods: {
			handleMessage (e) {
				e.detail.data.forEach(item => {
					if ( item.ready ) {
						this.ready = true
						this.setMode(this.mode)
						if ( this.value ) this.setValue(this.value)
					}
					if ( item.change ) {
						this.valueTmp = item.change
						this.$emit('change', item.change)
						this.$emit('input', item.change)
					}
				})
			},
			//重置内容
			setValue (value) {
				this.valueTmp = value
				this.$refs.webview && this.$refs.webview.evalJS(`setValue('${encodeURIComponent(encodeURIComponent(value.replace(/\'/g, '&aposync;')))}');`)
			},
			//在光标位置插入文本
			insert (value) {
				this.$refs.webview && this.$refs.webview.evalJS(`insert('${encodeURIComponent(encodeURIComponent(value.replace(/\'/g, '&aposync;')))}');`)
			},
			//撤回操作
			undo () {
				this.$refs.webview && this.$refs.webview.evalJS(`undo();`)
			},
			//撤销撤回操作
			redo () {
				this.$refs.webview && this.$refs.webview.evalJS(`redo();`)
			},
			format () {
				this.$refs.webview && this.$refs.webview.evalJS(`format();`)
			},
			//设置模式
			setMode (mode) {
				this.$refs.webview && this.$refs.webview.evalJS(`setMode('${mode}');`)
			},
			//设置主题
			setTheme (theme) {
				this.$refs.webview && this.$refs.webview.evalJS(`setTheme('${theme}');`)
			}
		},
		watch: {
			value (newVal) {
				if ( this.ready && this.valueTmp != this.value ) this.setValue(newVal)
			},
			mode (newVal) {
				this.setMode(newVal)
			},
			theme (newVal) {
				this.setTheme(newVal)
			}
		}
	}
</script>

<style>
</style>